import styles from "@/app/pages/role/role.module.scss";
import {DialogList} from "@/app/components/dialog/dialog-list";
import {useState} from "react";
import {ChatSession} from "@/app/store/chat-store";
import {Dialog, Message, MessageDirection, MessageRole, MessageType} from "@/types/chat";
import {GptVersion} from "@/app/constants";
import {Avatar, Button} from "antd";
import {useNavigate} from "react-router-dom";

// 模拟的AI角色数据
const mockAICharacters: Dialog[] = [
  {
    avatar: "/role/chatgpt.png",
    dialogId: 1,
    read: true,
    subTitle: "我是AI助手，可以回答各种问题",
    timestamp: new Date().getTime() - 3600000,
    title: "通用助手",
    count: 5
  },
  {
    avatar: "/role/interview.png",
    dialogId: 2,
    read: false,
    subTitle: "准备好进行面试练习了吗？",
    timestamp: new Date().getTime() - 7200000,
    title: "面试辅导师",
    count: 3
  },
  {
    avatar: "/role/psychological.png",
    dialogId: 3,
    read: true,
    subTitle: "我可以倾听你的烦恼",
    timestamp: new Date().getTime() - 86400000,
    title: "心理咨询师",
    count: 8
  },
  {
    avatar: "/role/file-transfer-assistant.png",
    dialogId: 4,
    read: true,
    subTitle: "需要我帮你处理文件吗？",
    timestamp: new Date().getTime() - 172800000,
    title: "文件助手",
    count: 2
  },
  {
    avatar: "/role/bugstack.png",
    dialogId: 5,
    read: false,
    subTitle: "代码有问题？我来帮你调试",
    timestamp: new Date().getTime() - 259200000,
    title: "编程助手",
    count: 12
  }
];

// 模拟的对话内容
const mockConversations: Record<number, Message[]> = {
  1: [
    {
      avatar: "/role/chatgpt.png",
      content: "你好！我是通用AI助手，有什么可以帮助你的？",
      message_type: MessageType.Text,
      time: new Date().getTime() - 3600000,
      direction: MessageDirection.Receive,
      role: MessageRole.assistant
    },
    {
      avatar: "/role/headImage.jpg",
      content: "你能给我讲一个笑话吗？",
      message_type: MessageType.Text,
      time: new Date().getTime() - 3500000,
      direction: MessageDirection.Send,
      role: MessageRole.user
    },
    {
      avatar: "/role/chatgpt.png",
      content: "为什么程序员总是分不清万圣节和圣诞节？因为 Oct 31 = Dec 25！",
      message_type: MessageType.Text,
      time: new Date().getTime() - 3400000,
      direction: MessageDirection.Receive,
      role: MessageRole.assistant
    }
  ],
  2: [
    {
      avatar: "/role/interview.png",
      content: "你好！我是面试辅导师，准备好进行技术面试练习了吗？",
      message_type: MessageType.Text,
      time: new Date().getTime() - 7200000,
      direction: MessageDirection.Receive,
      role: MessageRole.assistant
    },
    {
      avatar: "/role/headImage.jpg",
      content: "是的，我想练习前端开发的面试问题",
      message_type: MessageType.Text,
      time: new Date().getTime() - 7100000,
      direction: MessageDirection.Send,
      role: MessageRole.user
    }
  ],
  3: [
    {
      avatar: "/role/psychological.png",
      content: "你好！我是心理咨询师，有什么想和我分享的吗？",
      message_type: MessageType.Text,
      time: new Date().getTime() - 86400000,
      direction: MessageDirection.Receive,
      role: MessageRole.assistant
    }
  ],
  4: [
    {
      avatar: "/role/file-transfer-assistant.png",
      content: "你好！我是文件助手，可以帮你处理各种文件任务",
      message_type: MessageType.Text,
      time: new Date().getTime() - 172800000,
      direction: MessageDirection.Receive,
      role: MessageRole.assistant
    }
  ],
  5: [
    {
      avatar: "/role/bugstack.png",
      content: "你好！我是编程助手，有什么代码问题需要解决吗？",
      message_type: MessageType.Text,
      time: new Date().getTime() - 259200000,
      direction: MessageDirection.Receive,
      role: MessageRole.assistant
    }
  ]
};

export function Role() {
  const [selectedCharacter, setSelectedCharacter] = useState<Dialog | null>(null);
  const [showConversation, setShowConversation] = useState(false);
  const navigate = useNavigate();

  // 将Dialog转换为ChatSession
  const convertToSession = (dialog: Dialog): ChatSession => {
    return {
      id: dialog.dialogId,
      dialog: dialog,
      messages: mockConversations[dialog.dialogId] || [],
      config: {
        gptVersion: GptVersion.GPT_3_5_TURBO
      }
    };
  };

  // 处理角色点击
  const handleCharacterClick = (dialog: Dialog) => {
    setSelectedCharacter(dialog);
    setShowConversation(true);
  };

  // 处理返回角色列表
  const handleBackToList = () => {
    setShowConversation(false);
    setSelectedCharacter(null);
  };

  // 开始与选定角色的对话
  const startConversation = (dialog: Dialog) => {
    const session = convertToSession(dialog);
    navigate(`/chat/${session.id}`, {state: {title: session.dialog.title}});
  };

  return (
    <div className={styles["role"]}>
      {!showConversation ? (
        <>
          <div className={styles["role-header"]}>
            <h2>AI角色选择</h2>
          </div>
          <div className={styles["role-list"]}>
            {mockAICharacters.map((character) => (
              <div
                key={character.dialogId}
                className={styles["role-item"]}
                onClick={() => handleCharacterClick(character)}
              >
                <Avatar shape="square" src={character.avatar} size={60} />
                <div className={styles["role-info"]}>
                  <h3>{character.title}</h3>
                  <p>{character.subTitle}</p>
                </div>
              </div>
            ))}
          </div>
        </>
      ) : (
        <>
          <div className={styles["conversation-header"]}>
            <Button onClick={handleBackToList}>返回角色列表</Button>
            <h2>{selectedCharacter?.title}</h2>
          </div>
          <div className={styles["conversation-content"]}>
            {selectedCharacter && (
              <div className={styles["character-details"]}>
                <Avatar shape="square" src={selectedCharacter.avatar} size={80} />
                <div className={styles["details-info"]}>
                  <h3>{selectedCharacter.title}</h3>
                  <p>{selectedCharacter.subTitle}</p>
                  <p>最后活动时间: {new Date(selectedCharacter.timestamp).toLocaleString()}</p>
                  <Button 
                    type="primary" 
                    onClick={() => startConversation(selectedCharacter)}
                  >
                    开始对话
                  </Button>
                </div>
              </div>
            )}
            <div className={styles["message-list"]}>
              {selectedCharacter && mockConversations[selectedCharacter.dialogId]?.map((message, index) => (
                <div 
                  key={index} 
                  className={`${styles["message-item"]} ${
                    message.direction === MessageDirection.Send ? styles["message-sent"] : styles["message-received"]
                  }`}
                >
                  <Avatar src={message.avatar} size={32} />
                  <div className={styles["message-content"]}>
                    <p>{message.content}</p>
                  </div>
                </div>
              ))}
            </div>
          </div>
        </>
      )}
    </div>
  );
}